import { useState, useEffect } from 'react';
import { Layout, Button, message, Spin, Alert, Input } from 'antd';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import ConfigForm from './components/ConfigForm';
import ExchangeList from './components/ExchangeList';
import { ConfigManager } from './services/ConfigManager';
import { ApiService } from './services/ApiService';
import type { ExchangeItem, ExchangeBody, ApiConfig } from './types';
import './App.css';

const { Header, Content } = Layout;

/**
 * 获取模拟数据的函数
 * 用于在API调用失败或初始化时显示示例数据
 * @returns {ExchangeItem[]} 模拟的交易所项目列表
 */
const getMockData = (): ExchangeItem[] => {
  return [
    {
      id: 1597,
      buff_id: 35650,
      buff_sell_price: 3.5,
      buff_sell_num: 278,
      buff_buy_price: 3.7,
      buff_buy_num: 37,
      steam_sell_price: 5.29,
      steam_sell_num: 130,
      steam_buy_price: 5.25,
      steam_buy_num: 16867,
      market_hash_name: "MP9 | Deadly Poison (Minimal Wear)",
      name: "测试数据 | 致命毒药 (略有磨损)",
      img: "https://g.fp.ps.netease.com/market/file/5aa0ac456f0494e747d9f03cu1SihtdK",
      yyyp_id: 866,
      yyyp_sell_price: 4.18,
      yyyp_sell_num: 52,
      yyyp_buy_price: 3.7,
      yyyp_buy_num: 6,
      max_price: 1.5,
      turnover_number: 61
    },
    {
      id: 11216,
      buff_id: 773684,
      buff_sell_price: 27.99,
      buff_sell_num: 64,
      buff_buy_price: 25.4,
      buff_buy_num: 6,
      steam_sell_price: 43.32,
      steam_sell_num: 56,
      steam_buy_price: 41.07,
      steam_buy_num: 9673,
      market_hash_name: "MP9 | Hydra (Battle-Scarred)",
      name: "MP9 | 九头蛇 (战痕累累)",
      img: "https://g.fp.ps.netease.com/market/file/5daa2e765e6027a7e3a93a4fE5WFDQZH02",
      yyyp_id: 49617,
      yyyp_sell_price: 35,
      yyyp_sell_num: 6,
      yyyp_buy_price: 27.2,
      yyyp_buy_num: 8,
      max_price: 1.46731,
      turnover_number: 9
    }
  ];
};

/**
 * CSGO挂刀行情系统主组件
 * 负责展示数据列表、配置管理和搜索功能
 */
function App() {
  // 状态管理
  const [data, setData] = useState<ExchangeItem[]>(getMockData());
  const [loading, setLoading] = useState(false);
  const [apiConfig, setApiConfig] = useState<ApiConfig>({ apiToken: 'KQBXL1S7R6B1Q152Z3F527L5' });
  const [exchangeConfig, setExchangeConfig] = useState<ExchangeBody>({
    // 严格按照API文档要求初始化
    page_index: 1,
    platforms: 'BUFF-YYYP',
    res: 0,
    sort_by: 1,
    // 可选字段使用API文档中的默认值
    min_price: 1,
    max_price: 5000
  });
  const [searchText, setSearchText] = useState('');
  const [lastError, setLastError] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  /**
   * 加载配置信息
   * 从localStorage中读取API和Exchange配置
   */
  const loadConfigs = () => {
    try {
      const api = ConfigManager.loadApiConfig();
      const exchange = ConfigManager.loadExchangeConfig();

      if (api) {
        setApiConfig(api);
      }
      if (exchange) {
        setExchangeConfig(exchange);
        // 从配置中读取搜索关键字
        if (exchange.text) {
          setSearchText(exchange.text);
        }
      }
    } catch (error) {
      console.error('加载配置失败:', error);
    }
  };

  /**
   * 获取交易所数据
   * 从API获取数据，如果失败则使用模拟数据
   */
  const fetchData = async () => {
    setLoading(true);
    try {
      setLastError(null);
      const response = await ApiService.fetchExchangeDetail(apiConfig, exchangeConfig);
      
      // 检查响应结构并设置数据
      if (response && response.code === 200 && response.data && Array.isArray(response.data)) {
        console.log('设置API数据，长度:', response.data.length);
        setData(response.data);
        message.success('数据获取成功');
      } else {
        throw new Error(response?.msg || '无效的响应结构');
      }
    } catch (error: unknown) {
      const errorMessage = error instanceof Error ? error.message : '获取数据失败，请检查API配置和网络连接';
      setLastError(errorMessage);
      message.error(errorMessage);
      
      // 使用模拟数据作为备用
      console.log('使用模拟数据');
      setData(getMockData());
    } finally {
      setLoading(false);
    }
  };

  /**
   * 处理配置更新
   * 重新加载配置并获取数据
   */
  const handleConfigUpdate = () => {
    loadConfigs();
    fetchData();
  };

  /**
   * 实时保存搜索文本到配置
   * 当搜索框内容变化时自动保存到localStorage
   */
  const handleSearchTextChange = async (text: string) => {
    setSearchText(text);
    setIsSaving(true);
    
    // 立即更新配置并保存
    const updatedConfig = { 
      ...exchangeConfig, 
      text: text,
      // 确保所有必要字段都有默认值
      page_index: exchangeConfig.page_index || 1,
      res: exchangeConfig.res !== undefined ? exchangeConfig.res : 0,
      platforms: exchangeConfig.platforms || 'BUFF-YYYP',
      sort_by: exchangeConfig.sort_by !== undefined ? exchangeConfig.sort_by : 1,
      min_price: exchangeConfig.min_price !== undefined ? exchangeConfig.min_price : 1,
      max_price: exchangeConfig.max_price !== undefined ? exchangeConfig.max_price : 5000
    };
    
    setExchangeConfig(updatedConfig);
    
    // 立即保存到localStorage
    try {
      const saveSuccess = ConfigManager.saveExchangeConfig(updatedConfig);
      if (saveSuccess) {
        console.log('搜索文本已实时保存到配置');
      } else {
        console.warn('搜索文本保存失败');
      }
    } catch (error) {
      console.error('保存搜索文本时发生错误:', error);
    } finally {
      setIsSaving(false);
    }
  };

  /**
   * 处理搜索功能
   * 确保先完全保存配置，验证保存成功后再执行查询
   */
  const handleSearch = async () => {
    // 如果正在保存中，等待保存完成
    if (isSaving) {
      console.log('正在保存配置中，等待保存完成...');
      // 等待保存完成，最多等待3秒
      let waitTime = 0;
      while (isSaving && waitTime < 3000) {
        await new Promise(resolve => setTimeout(resolve, 100));
        waitTime += 100;
      }
    }
    
    // 更新配置中的搜索关键字
    const updatedConfig = { 
      ...exchangeConfig, 
      text: searchText,
      // 确保所有必要字段都有默认值
      page_index: exchangeConfig.page_index || 1,
      res: exchangeConfig.res !== undefined ? exchangeConfig.res : 0,
      platforms: exchangeConfig.platforms || 'BUFF-YYYP',
      sort_by: exchangeConfig.sort_by !== undefined ? exchangeConfig.sort_by : 1,
      min_price: exchangeConfig.min_price !== undefined ? exchangeConfig.min_price : 1,
      max_price: exchangeConfig.max_price !== undefined ? exchangeConfig.max_price : 5000
    };
    
    setExchangeConfig(updatedConfig);
    setIsSaving(true);
    
    // 保存到localStorage配置并验证保存是否成功
    try {
      console.log('搜索前开始保存配置...');
      const saveSuccess = ConfigManager.saveExchangeConfig(updatedConfig);
      
      if (saveSuccess) {
        console.log('配置保存成功，开始查询数据...');
        // 保存成功后再查询数据
        await fetchData();
      } else {
        console.warn('配置保存失败，尝试使用当前配置进行查询');
        message.warning('配置保存失败，但将尝试使用当前配置进行查询');
        
        // 即使保存失败，也尝试使用当前配置查询数据
        await fetchData();
        
        // 尝试重新加载配置，确保状态一致性
        setTimeout(() => {
          loadConfigs();
        }, 100);
      }
    } catch (error) {
      console.error('保存搜索配置时发生异常:', error);
      message.error('配置保存异常，但将尝试使用当前配置进行查询');
      // 异常情况下也尝试查询数据
      await fetchData();
    } finally {
      setIsSaving(false);
    }
  };

  /**
   * 处理回车键搜索
   * @param {React.KeyboardEvent} e 键盘事件对象
   */
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  /**
   * 配置表单取消处理函数
   * 由于表单始终可见，此函数保持简单
   */
  const handleConfigCancel = () => {
    // ConfigForm始终可见，无需特殊处理
  };

  // 组件挂载时加载配置并自动刷新数据
  useEffect(() => {
    // 创建一个异步函数来确保配置加载后再获取数据
    const initializeApp = async () => {
      console.log('【App初始化】开始加载配置和数据...');
      
      // 直接从localStorage获取配置并设置状态
      try {
        // 直接检查localStorage内容
        const rawExchangeConfig = localStorage.getItem('exchangeConfig');
        const rawApiConfig = localStorage.getItem('apiConfig');
        
        console.log('【App初始化】从localStorage读取原始配置:');
        console.log('  - 交易配置:', rawExchangeConfig ? '存在' : '不存在');
        console.log('  - API配置:', rawApiConfig ? '存在' : '不存在');
        
        // 尝试直接解析localStorage中的配置，作为备用方案
        let parsedExchangeConfig = null;
        if (rawExchangeConfig) {
          try {
            parsedExchangeConfig = JSON.parse(rawExchangeConfig);
            console.log('【App初始化】成功直接解析交易配置:', parsedExchangeConfig);
          } catch (e) {
            console.error('【App初始化】直接解析交易配置失败:', e);
          }
        }
        
        // 使用ConfigManager加载配置
        const api = ConfigManager.loadApiConfig();
        const exchange = ConfigManager.loadExchangeConfig();

        console.log('【App初始化】通过ConfigManager加载的配置:');
        console.log('  - API配置:', api ? '存在' : '不存在');
        console.log('  - 交易配置:', exchange ? '存在' : '不存在');
        
        if (api) {
          console.log('【App初始化】设置API配置:', api);
          setApiConfig(api);
        }
        
        // 优先使用ConfigManager加载的配置，如果失败则使用直接解析的配置，最后使用默认配置
        const configToUse = exchange || parsedExchangeConfig || {
          page_index: 1,
          platforms: 'BUFF-YYYP',
          res: 0,
          sort_by: 1,
          min_price: 1,
          max_price: 5000,
          text: undefined,
          turnover: undefined,
          buy: undefined
        };
        
        console.log('【App初始化】将使用的配置:', JSON.stringify(configToUse));
        setExchangeConfig(configToUse);
        
        // 从配置中读取搜索关键字
        if (configToUse.text) {
          console.log('【App初始化】从配置中设置搜索关键字:', configToUse.text);
          setSearchText(configToUse.text);
        }
        
        // 短暂延迟确保状态更新完成
        await new Promise(resolve => setTimeout(resolve, 300)); // 增加延迟时间以确保状态更新完成
        
        // 创建一个新的配置引用，确保使用最新的状态
        const currentConfig = {...configToUse};
        console.log('【App初始化】配置加载完成，准备获取数据，使用的配置:', JSON.stringify(currentConfig));
        
        // 使用最新的配置获取数据
        setLoading(true);
        try {
          setLastError(null);
          console.log('【App初始化】开始获取数据，使用配置:', JSON.stringify(currentConfig));
          const response = await ApiService.fetchExchangeDetail(api || { apiToken: 'KQBXL1S7R6B1Q152Z3F527L5' }, currentConfig);
          
          // 检查响应结构并设置数据
          if (response && response.code === 200 && response.data && Array.isArray(response.data)) {
            console.log('【App初始化】数据获取成功，长度:', response.data.length);
            setData(response.data);
            message.success('数据获取成功');
          } else {
            throw new Error(response?.msg || '无效的响应结构');
          }
        } catch (error: unknown) {
          const errorMessage = error instanceof Error ? error.message : '获取数据失败，请检查API配置和网络连接';
          setLastError(errorMessage);
          message.error(errorMessage);
          
          // 使用模拟数据作为备用
          console.log('【App初始化】使用模拟数据');
          setData(getMockData());
        } finally {
          setLoading(false);
        }
      } catch (error) {
        console.error('【App初始化】初始化配置时出错:', error);
        message.error('初始化过程中发生错误，但已加载模拟数据');
        // 即使出错也确保有数据显示
        setData(getMockData());
        setLoading(false);
      }
    };
    
    initializeApp();
  }, []);

  return (
    <Layout className="app">
      <Header className="header">
        <div className="header-left">
          <h1>CSGO挂刀行情系统</h1>
        </div>
        <div className="header-right">
          <Button
            type="primary"
            icon={<ReloadOutlined />}
            onClick={fetchData}
            loading={loading}
            style={{ marginRight: 10 }}
          >
            刷新数据
          </Button>
          
        </div>
      </Header>
      {/* 配置界面 - 直接显示在顶部 */}
      <div className="config-container">
        <ConfigForm 
          visible={true}
          onCancel={handleConfigCancel}
          onConfigUpdate={handleConfigUpdate}
        />
      </div>
      
      <Content className="content">
        {lastError && (
          <Alert
            message="API调用失败，显示模拟数据"
            description={lastError}
            type="warning"
            showIcon
            style={{ marginBottom: 20 }}
          />
        )}
        <div className="data-container">
          <div className="search-container">
            <Input
              placeholder="饰品名称搜索"
              prefix={<SearchOutlined />}
              value={searchText}
              onChange={(e) => handleSearchTextChange(e.target.value)}
              onPressEnter={handleKeyPress}
              addonAfter={
                <Button 
                  type="primary" 
                  icon={<SearchOutlined />} 
                  onClick={handleSearch}
                  loading={isSaving || loading}
                  disabled={isSaving}
                >
                  {isSaving ? '保存中...' : '搜索'}
                </Button>
              }
              style={{ width: 300 }}
            />
          </div>
          {loading ? (
            <div className="loading-container">
              <Spin tip="正在获取数据..." />
            </div>
          ) : (
            <ExchangeList data={data} loading={loading} />
          )}
        </div>
      </Content>
    </Layout>
  );
}

export default App;
